<template>
    <teleport to="#app">
        <div id="frameEmptyPop" :style="style">
            <transition name="mark_tran" @click="change">
                <div class="pop_mark" v-if="isShow" :style="'z-index:'+zIndexMark"></div>
            </transition>
            
            <transition name="pop_div_elastic_tran">
                <div class="pop_div"  v-if="isShow" :style="'width:'+ width + ';max-height:' + maxHeight +';z-index:'+zIndexPop">
                    <div class="pop_head" v-if="n_data.title != null && n_data.title != ''">
                        <i class="bi bi-x-circle ver-mid" style="color:red" v-if="n_data.type == 'error'"></i>
                        <i class="bi bi-check-circle ver-mid" style="color:var(--success-background-dark);" v-else-if="n_data.type == 'success'"></i>
                        <i class="bi bi-exclamation-circle ver-mid" style="color:var(--warning-background-dark);" v-else-if="n_data.type == 'warning'"></i>
                        {{n_data.title}}
                    </div>
                    <div class="pop_body" v-if="n_data.body != undefined && n_data.body != null" v-html="n_data.body"></div>
                    <div class="pop_body" v-else>
                        <slot></slot>
                    </div>
                    <div class="pop_foot">
                        <button :class="{btn:true,default_btn:n_data.confirm,default_btn_nobg:!n_data.confirm}" @click="cancel(opera)" v-html="opera.cancel.text"></button>
                        <button class="btn primary_btn" :back_data="n_data.back_data" v-if="n_data.confirm" @click="ok(opera)" v-html="opera.next.text"></button>
                    </div>
                </div>
            </transition>
        </div>
    </teleport>
    
    
</template>
<script>
import {ref,onMounted,watch} from 'vue';
export default {
    name:'g-empty-pop',
    props:{
        empty_pop_data:{
            type:Object,
            default:{}
        },
        width:{
            type:String,
            default:"500px"
        },
        maxHeight:{
            type:String,
            default:"400px"
        },
        zIndexMark:{
            type:Number,
            default:998
        },
        zIndexPop:{
            type:Number,
            default:998
        },
        style:{
            type:Object,
            default:{}
        },
        proxy:{
            type:Object,
            proxy:{}
        }
    },
    setup(props){
        let isShow = ref(false);
        let n_data = ref({});
        let proxy = ref(props.proxy);
        let width = ref(props.width);
        let maxHeight = ref(props.maxHeight);
        let style = ref(props.style);

        let opera = ref({
            cancel:{
                text:'取消'
            },
            next:{
                text:'确定'
            }
        })
        
        let change = (data)=>{
            isShow.value = !isShow.value;
            opera.value = data.opera;
            n_data.value = data;
        }

        // 确认按钮操作
        let cancel = (opera)=>{
            opera.cancel.callOff(change);
        }

        // 确认按钮操作
        let ok = (opera)=>{
            
            opera.next.success(change);
        }
        
        return {
            // 变量
            n_data,opera,
            isShow,
            width,
            maxHeight,
            style,
            // 方法
            ok,
            close,change,
            cancel
        }
    }
}
</script>
<style scoped>
    #frameEmptyPop{
        /* position: absolute;
        width: 100%;
        height: 100vh;
        display: grid;
        grid-template-columns: repeat(12,1fr);
        grid-template-rows: repeat(8,1fr);
        z-index: 9999998; */
    }
    .pop_mark{
        /* grid-area: 1/1/span 8/span 12;
        background-color: rgba(0, 0, 0, 0.3);
        z-index: 998; */
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 998;
        background-color: rgba(0, 0, 0, 0.3);
    }
    
    .pop_head i,
    .pop_body i{
        font-size: 25px;
    }
    
    
    .pop_foot button{
        margin: 0 10px;
    }
</style>